import React, { Fragment, PureComponent } from 'react';
import ReactDOM from 'react-dom'

class Modal extends PureComponent {
  constructor(props) {
    super(props)
    this.test = null
  }
  render () {
    // 第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment
    // 第二个参数（container）是一个 DOM 元素；
    return ReactDOM.createPortal(
      this.props.children,
      document.getElementById("modal")
    )
  }
}

class App extends PureComponent {
  constructor(props) {
    super(props)
    this.item =1
  }
  
  render() {
    // Fragment 不会有真实的 div 嵌套
    // Fragment 允许你将子列表分组，而无需向 DOM 添加额外节点
    // 还有 <> </>这种语法
    // StrictMode 是一个用来突出显示应用程序中潜在问题的工具。
    // 与 Fragment 一样，StrictMode 不会渲染任何可见的 UI；
    // 它为其后代元素触发额外的检查和警告；
    //  严格模式检查仅在开发模式下运行；它们不会影响生产构建；
    return (
      <Fragment key={this.item}>
        <Modal>
          <h2>我是标题</h2>
        </Modal>
      </Fragment>
    );
  }
}

export default App;
